import { micromark } from 'micromark'
import { gfm, gfmHtml } from 'micromark-extension-gfm'
import { useCallback, useEffect, useState } from 'react'
import { math, mathHtml } from 'micromark-extension-math'

const MarkdownEditor = () => {
    const [value, setValue] = useState("# helloWorld");
    const [__html, setHtml] = useState("");
    const onChange = useCallback(({ target: { value } }: any) => setValue(value), []);
    useEffect(() => {
        setHtml(micromark(value, { extensions: [gfm(), math()], htmlExtensions: [gfmHtml(), mathHtml()] }));
    }, [value]);
    return (
        <div className="flex">
            <div className="w-1/2">
                <textarea value={value} onChange={onChange}></textarea>
            </div>
            <div className="w-1/2" dangerouslySetInnerHTML={{ __html }}>

            </div>
        </div>
    )
}
export default MarkdownEditor